<template>
  <!-- 新增国家分区 -->
  <el-dialog
    v-model="countryOpen"
    title="新增国家分区"
    :close-on-click-modal="false"
    width="700px"
    append-to-body
  >
    <el-row>
      <el-col :span="1.5">
        <el-form ref="editForm" :model="countryForm" label-width="80px">
          <el-form-item
            label="分区名称"
            prop="name"
            :rules="[
              { required: true, message: '分区名称必填', trigger: 'blur' },
            ]"
          >
            <el-input v-model="countryForm.name" clearable></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div style="text-align: center;">
      <el-transfer
        v-model="cityValue"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入城市中文名"
        :titles="['待选国家', '选定国家']"
        :data="countryList"
        @change="handleChange"
      ></el-transfer>
    </div>

    <template #footer>
      <div>
        <el-button type="primary" :loading="loading" @click="submitServiceForm">确定</el-button>
        <el-button @click="cancelService">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, defineExpose } from 'vue'
import { ElMessage, ElButton } from 'element-plus'
import {
  addData,
} from '@/api/BusinessConfig/costCountryPartition'
import { getQueryList } from '@/api/basicConfig/stateMaintanance'

interface Option {
  key: number;
  label: string;
  pinyin:number,
  id:number
  countryCode:string,
  countryName:string,
  countryNameEn:string
}
const props = defineProps({
  productId: {
    type: Number,
  },
})
const emits = defineEmits(['changeList'])
const loading = ref(false)
const countryOpen = ref(false)
const countryForm = ref({
  id: undefined,
  costPriceId: undefined,
  planTypeId: undefined,
  name: undefined,
  partitionInfoVo: undefined,
})
const cityValue = ref([]),
  editForm = ref(null),
  countryList = ref([]),
  {
    proxy,
  }: {
    proxy: any;
  } = getCurrentInstance()
  // 搜索
const filterMethod = (query: any, item: { label: string | any[] }) => item.label.indexOf(query) > -1
const submitServiceForm = () => {
  countryForm.value.costPriceId = props.productId
  proxy.$validateForm(editForm.value, () => {
    if (cityValue.value.length == 0) {
      proxy.$alert('国家未选择', '提示', {
        confirmButtonText: '确定',
      })
    } else {
      countryForm.value.planTypeId = '1'
      countryForm.value.partitionInfoVo = []
      cityValue.value.forEach((el) => {
        countryForm.value.partitionInfoVo.push(countryList.value[el])
      })
      loading.value = true
      addData(countryForm.value).then((res) => {
        if (res.code == 200) {
          countryOpen.value = true
          ElMessage.success('新增成功')
          emits('changeList')
        }
      })
      .finally(() => {
        countryOpen.value = false
      })
      .catch((error) => {
        error === 'cancel' && ElMessage.info('取消操作')
      })
    }
  })
}
// 查询国家分区
const getList = () => {
  const data = { pageNum: 0, pageSize: 0 }
  getQueryList(data).then((res) => {
    countryList.value = generateData(res.data)
  })
}
getList()
const generateData = (dataList: any[]) => {
  if (dataList.length > 0) {
    const data: Option[] = []
    const cities = dataList.map((el: { countryChName: any }) => el.countryChName)
    const countryCode = dataList.map((el: { countryCode: any }) => el.countryCode)
    const countryNameEn = dataList.map((el: { countryEnName: any }) => el.countryEnName)
    const idList = dataList.map((el: { id: any }) => el.id)
    cities.forEach((city: any, index: string | number) => {
      data.push({
        label: `${ city }`,
        key: index,
        pinyin: countryCode[index],
        countryNameEn: countryNameEn[index],
        id: idList[index],
        countryCode: countryCode[index],
        countryName: `${ city }`,
      })
    })
    return data
  }
}

const handleChange = (
  value: number | string,
  direction: 'left' | 'right',
  movedKeys: string[] | number[],
) => {
  console.log(value, direction, movedKeys)
}
const cancelService = () => {
  countryOpen.value = false
}
defineExpose({
  countryOpen,
})
</script>